let category = document.getElementsByClassName('category')
let ranking = document.getElementsByClassName('ranking')
const getNav = () => ajax({
    url: "http://chst.vip:1234/api/getcategorytitle",
})
getNav()
    .then(res => {
        // console.log(res);
        main.innerHTML = renderTitle(res)
        // console.log(category.length);



        // for(let i=0;i<category.length;i++){
        //     let flag=true
        //     category[i].onclick=()=>{
        //         // console.log(i);
        //         // console.log(ranking[i]);
        //         if(flag){
        //             ranking[i].style.display="flex"
        //             flag=!flag
        //         }else{
        //             ranking[i].style.display="none"
        //             flag=!flag
        //         }

        //         console.log(ranking[i].children);
        //         let arr=ranking[i].children
        //         for(let i=0;i<arr.length;i++){
        //             // console.log(arr[i]);
        //             // console.log(ranking[i].children[i]);
        //             arr[i].onclick=()=>{


        //                 // console.log(1111);
        //                 // console.log(this);
        //             }
        //         }

        //     }

        //     }
        // console.log(main);
        let arr = []
        res.result.forEach((item, index) => {
            // console.log(item.title);
            let p = fetch("http://chst.vip:1234/api/getcategory?titleid=" + index + " ")
                .then(body => body.json())
            arr.push(p)
        });
        return Promise.all(arr)
    })
    .then(res => {
        // console.log(res);
        res.forEach((item, index) => {
            ranking[index].innerHTML = renderBrand(item.result);


        })
        //    console.log(ranking.length);
        for (let i = 0; i < category.length; i++) {
            let flag = true
            category[i].onclick = () => {
                // console.log(i);
                // console.log(ranking[i]);
                if (flag) {

                    
                    ranking[i].style.display = "flex"
                    

                    flag = !flag
                } else {
                    ranking[i].style.display = "none"
                    flag = !flag
                }

                // console.log(ranking[i].children);
                let arr = ranking[i].children
                for (let j = 0; j < arr.length; j++) {
                    
                    arr[j].onclick = () => {
                    //    index=arr[j].index=j
                        // console.log(res[i].result[j]);  //i第一标题的索引，j第二索引的值
                        // console.log(res[i].result);
                        // console.log(res[i].result[j].categoryId);
                        let categoryid= res[i].result[j].categoryId
                        // console.log(categoryid)
                        
                        // console.log(index); //指向自己

                        arr[j].href="bjialist.html?categoryid="+categoryid+""

                    }

                // }
                 

                }

            }


           
        }


    })


//渲染大标题
function renderTitle(arr) {
    let html = '';
    arr.result.forEach(item => {
        html +=
            `
            <div class="main-title">
            <div class="category">
            <span>${item.title}</span>
            <span>▼</span>
            </div>
            <ul class="ranking">
            
            </ul>
            </div>

            `
    })
    return html;

}



// 渲染小标题
//渲染内部小标题的函数
function renderBrand(arr) {

    let html = ''
    // console.log(arr);  //小标题的素组的
    arr.forEach((item, index) => {
        html += `
            <a class="${item.categoryId}">${item.category}</a> `;

    })
    return html;

}

// function getPageList(categoryid=0, pageid=1) {

//     const getPage = () => ajax({
//         url: "http://chst.vip:1234/api/getproductlist",
//         data: { categoryid: categoryid, pageid: pageid },
//     })
//     getPage()
//         .then(res => {
//             console.log(res);
//         })
// }



















// ranking.innerHTML = `hgyghgygygy    `;
// console.log(ranking.length);

// titles = [...category];
// console.log(category.children);
//     for (let i = 0; i < titles.length; i++) {
//         let flag = true;
//         titles[i].children[0].onclick = function () {
//             for (let j = 0; j < titles.length; j++) {
//                 titles[j].children[1].setAttribute('style', 'height : 0; overflow : hidden;');
//             }
//             console.log(this);
//             if (flag) {
//                 this.nextElementSibling.setAttribute('style', 'height : 20.453333rem');
//             } else {
//                 this.nextElementSibling.setAttribute('style', 'height : 0; overflow : hidden;');
//             }
//             flag = !flag;
//         }
//     }
// let cates=category.children
// console.log(category);
// console.log(category[1]);
// let cates = document.getElementById("main")

// console.log(cates);
// for (let i = 0; i < cates.length; i++) {
//                 // requestRank(cateData[i].titleId, ranks[i])
//                 let flag = true
//                 cates[i].onclick = function() {
//                     console.log(cates[i]);
//                     if (flag) {
//                         // ranks[i].style.display = "flex"
//                         ranks[i].style.display = "block"
//                         flag = !flag
//                     } else {
//                         ranks[i].style.display = "none"
//                         flag = !flag

//                     }
//                 }
//             }








    // let ranking=document.getElementsByClassName('ranking')
    // let div=document.getElementsByClassName('div')

//  <div id="category">
//         <span>大家电</span>
//         <span>▼</span>
//     </div>
//     <div id="ranking">
//         <div>电视</div>
//     </div> 





/////对的
// let main = document.getElementById("main")



// // 渲染大标题函数
// function renderTitle(arr) {
//     let html = '';
//     arr.forEach(item => {
//         html +=
//             `<div class="category">
//             <span>${item.title}</span>
//             <span>▼</span>
//         </div>
//         <div class="ranking">

//         </div>`
//     })
//     return html;
// }
// let category=document.getElementsByClassName('category')
// let ranking=document.getElementsByClassName('ranking')

// // console.log(ranking);


// //渲染内部小标题的函数
// function renderBrand(arr) {

//     let html = ''
//     console.log(arr);  //小标题的素组的
//     arr.forEach((item, index) => {
//         // console.log(item);
//         // console.log(index);
//         html += `
//         <a class="div">${item.category}</a> `;

//     })
//     return html;

// }
// // let ranking=document.getElementsByClassName('ranking')
// // let div=document.getElementsByClassName('div')

// const getTitle = () =>
//     ajax({
//         url: 'http://chst.vip:1234/api/getcategorytitle'
//     })
// getTitle().then(res => {
//     res = res.result;
//     main.innerHTML = renderTitle(res);
//     let arr = [];
//     res.forEach((item,index) => {
//         let p = fetch("http://chst.vip:1234/api/getcategory?titleid="+index+" ").then(body => body.json());
//         arr.push(p);
//     })
//     return Promise.all(arr)
// }).then(res => {

//     res.forEach((item,index) => {

//         let html = '';
//         html = renderBrand(item.result);

//         let ul = ranking[index];

//         console.log(ul);


//         ul.innerHTML += html;
//         // ranking.innerHTML += html;


//     })


    // titles = [...category];
    // console.log(titles);
    // for (let i = 0; i < titles.length; i++) {
    //     let flag = true;
    //     titles[i].children[0].onclick = function () {
    //         console.log(1111);
    //         for (let j = 0; j < titles.length; j++) {
    //             titles[j].children[1].setAttribute('style', 'height : 0; overflow : hidden;');
    //         }
    //         // console.log(this);
    //         if (flag) {
    //             this.nextElementSibling.setAttribute('style', 'height : 20.453333rem');
    //         } else {
    //             this.nextElementSibling.setAttribute('style', 'height : 0; overflow : hidden;');
    //         }
    //         flag = !flag;
    //     }
    // }
// })



//对的


// 渲染十大品牌
// function renderBrand(arr) {
//     let html = ''
//     arr.forEach((item, index) => {
//         html += `<li class="main-title-content">
//         <a class="item" href='brand.html?brandtitleid=${item.brandId}&brandName=${item.brandName}'>
//             <span>${index + 1}</span>
//             <span>${item.brandName}</span>
//             <p>${item.brandInfo}</p>
//         </a>
//     </li>`;

//     })
//     return html;
// }

// 请求数据
// const getTitle = () =>
//     ajax({
//         url: 'http://chst.vip:1234/api/getbrandtitle'
//     })
// getTitle().then(res => {
//     res = res.result;
//     main.innerHTML = renderTitle(res);
//     let arr = [];
//     res.forEach(item => {
//         let p = fetch(`http://chst.vip:1234/api/getbrand?brandtitleid=${item.brandTitleId}`).then(body => body.json());
//         arr.push(p);
//     })
//     return Promise.all(arr)
// }).then(res => {
//     let titles = main.children;
//     res.forEach((item, index) => {
//         console.log(item);
//         let html = '';
//         html = renderBrand(item.result);
//         let ul = titles[index].children[1];
//         ul.innerHTML += html;
//     })

//     titles = [...titles];
//     for (let i = 0; i < titles.length; i++) {
//         let flag = true;
//         titles[i].children[0].onclick = function () {
//             for (let j = 0; j < titles.length; j++) {
//                 titles[j].children[1].setAttribute('style', 'height : 0; overflow : hidden;');
//             }
//             console.log(this);
//             if (flag) {
//                 this.nextElementSibling.setAttribute('style', 'height : 20.453333rem');
//             } else {
//                 this.nextElementSibling.setAttribute('style', 'height : 0; overflow : hidden;');
//             }
//             flag = !flag;
//         }
//     }
// })



















































// let main = document.getElementById("main") //获取容纳内容区域的盒子

// const getNav=()=>ajax({
//     url: "http://chst.vip:1234/api/getcategorytitle",
// })
// getNav()
//     .then(res=>{
//         let navNum=res.result
//         let html=""
//         navNum.forEach(item=>{
//             html += `
//                  <div class="category">
//                      <span>${item.title}</span>
//                      <span>▼</span>
//                  </div>
//                  <div class="ranking">
//                 44454654667687686879
//                  </div>`
//         })
//         main.innerHTML=html
//         let cates=document.getElementsByClassName("category")
//         let ranks=document.getElementsByClassName("ranking")
//         console.log(cates.length);
//         for (let i = 0; i < cates.length; i++) {
//             // requestRank(cateData[i].titleId, ranks[i])
//             let flag = true
//             cates[i].onclick = function() {
//                 console.log(cates[i]);
//                 if (flag) {
//                     // ranks[i].style.display = "flex"
//                     ranks[i].style.display = "block"
//                     flag = !flag
//                 } else {
//                     ranks[i].style.display = "none"
//                     flag = !flag

//                 }
//             }
//         }

//     })






// console.log(main);
// ajax({
//     url: "http://chst.vip:1234/api/getcategorytitle",
//     success(res) {
//         let cateData = res.result
//         let html = ""
//         cateData.forEach(item => {
//             html += `
//                 <div id="category">
//                     <span>${item.title}</span>
//                     <span>▼</span>
//                 </div>
//                 <div id="ranking">
//                 </div>`
//         });


//         main.innerHTML = html;
//         let cates = document.querySelectorAll("#category")
//         let ranks = document.querySelectorAll("#ranking")
//         console.log(cates);
//         console.log(ranks);
        // for (let i = 0; i < cates.length; i++) {
        //     requestRank(cateData[i].titleId, ranks[i])
        //     let flag = true
        //     cates[i].onclick = function() {
        //         console.log(cates[i]);
        //         if (flag) {
        //             ranks[i].style.display = "flex"
        //             flag = !flag
        //         } else {
        //             ranks[i].style.display = "none"
        //             flag = !flag

        //         }
        //     }
//         }
//     }

// })

// function requestRank(titleId, rank) {
//     ajax({
//         url: "http://chst.vip:1234/api/getcategory",
//         data: {
//             titleid: titleId
//         },
//         success(res) {
//             let html = ""
//             let rankData = res.result
//             rankData.forEach(item => {
//                 html += `
//                 <a>${item.category}</a>
//                 `
//             })
//             rank.innerHTML = html

//         }
//     })
// }